<script>
import border from "@/views/formShortLink/border/index.vue";

export default {
  components: { border },
  props: ['data'],
  data() {
    return {
      foldUPBoolean: false,
      startTime: '2025-08-31 08:00',
      endTime: '2025-08-31 16:00',
      tableData: [{
        时间: '12:00:00',
        间隔: '2分钟',
        模式: '网络',
        停留: '3',
        路距: '35',
        速度: '8'
      }, {
        时间: '12:00:00',
        间隔: '2分钟',
        模式: '网络',
        停留: '3',
        路距: '35',
        速度: '8'
      }, {
        时间: '12:00:00',
        间隔: '2分钟',
        模式: '网络',
        停留: '3',
        路距: '35',
        速度: '8'
      }, {
        时间: '12:00:00',
        间隔: '2分钟',
        模式: '网络',
        停留: '3',
        路距: '35',
        速度: '8'
      }, {
        时间: '12:00:00',
        间隔: '2分钟',
        模式: '网络',
        停留: '3',
        路距: '35',
        速度: '8'
      }]
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData(){
      console.log(this.data)
    },
    showMap() {
      this.$emit('showMap', this.data)//模拟创建轨迹
      this.$emit('time-range-selected', this.startTime, this.endTime, this.data);
      this.$refs.borderRef.setfoldUp(true)
    },
    mapStart(v) {
      this.$emit('play', v)//启动 暂停 停止 播放
      this.$refs.borderRef.setfoldUp(true)
    }
  }
}
</script>

<template>
  <border title="轨迹回放" ref="borderRef" :foldUpBtn="true" w="760px" h="600px" @close="$emit('close')"
    :foldUp="foldUPBoolean" x="630px" y="20%">
    <div class="trajectoryPage">
      <div class="top">
        <el-form :inline="true" size="mini">
          <el-form-item label="开始时间">
            <el-date-picker v-model="startTime" style="width: 180px;" type="datetime" placeholder="选择日期时间" />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker style="width: 180px;" v-model="endTime" type="datetime" placeholder="选择日期时间" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="showMap">查询</el-button>
            <el-button type="primary" size="mini">前一天</el-button>
            <el-button type="primary" size="mini">后一天</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="centerDiv">
        <el-table :data="tableData" size="mini" border default-expand-all height="100%" style="width: 100%;">
          <el-table-column type="expand" width="1">
            <template slot-scope="props">
              湖北省武汉市XXXXX附近28米处<span style="color: #E6A23C">119.123456,26.123456</span>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="55" />
          <el-table-column prop="时间" label="时间" align="center" />
          <el-table-column prop="间隔" label="间隔" align="center" />
          <el-table-column prop="模式" label="模式" align="center" />
          <el-table-column prop="停留" label="停留(分)" align="center" />
          <el-table-column prop="路距" label="距离(米)" align="center" />
          <el-table-column prop="速度" label="速度(米/秒)" align="center" />
        </el-table>
      </div>
      <div class="bottom">
        <el-button type="primary" size="mini" @click="showMap">查看地图</el-button>
        <el-button type="primary" size="mini" @click="mapStart('start')">播放动画</el-button>
        <el-button type="primary" size="mini" @click="mapStart('pause')">暂停播放</el-button>
        <el-button type="primary" size="mini" @click="mapStart('stop')">停止播放</el-button>
        <el-button type="primary" size="mini" @click="mapStart('clear')">清空轨迹</el-button>
        <el-button type="primary" size="mini">导出数据</el-button>
      </div>
    </div>
  </border>

</template>

<style scoped lang="scss">
.trajectoryPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;

  ::v-deep .el-table__expand-icon--expanded {
    display: none;
  }

  .top {
    display: flex;
    flex-direction: column;
  }

  .centerDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 80px);
    background-color: #00afff;
  }
}
</style>
